<template>
  <div class="locationbox">
    <div class="location_top">
      收获地址
      <i class="location_cancel" @click="closeLocation">x</i>
    </div>
    <div class="location_body">
      <div class="location_table">
        <table class="location_arr" v-show="addressLists.length">
          <thead>
            <tr>
              <th>收货人</th>
              <th>电话</th>
              <th>地区</th>
              <th>详细地址</th>
              <th>设置</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody v-for="item in addressLists" :key="item.id">
            <tr>
              <td>{{ item.name }}</td>
              <td>{{ item.tel }}</td>
              <td>{{ item.basicLocation }}</td>
              <td>{{item.detailLocation}}</td>
              <td>默认地址</td>
              <td><a  @click="showAddLocation">修改</a>&nbsp;<a>删除</a></td>
            </tr>
          </tbody>
        </table>
        <h1 v-show="!addressLists.length">暂无信息</h1>
      </div>
      <div class="add_address_btn">
        <button @click="showAddLocation">添加收获地址</button>
      </div>
    </div>
    <AddLocation :addLocationFlag.sync="addLocationFlag" v-show="addLocationFlag"></AddLocation>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import AddLocation from './AddLocation.vue'
export default {
  props: ['value'],
  data () {
    return {
      addLocationFlag: false
    }
  },
  computed: {
    ...mapState(['addressLists'])
  },
  methods: {
    closeLocation (e) {
      this.$emit('input', (e.target.value = false))
    },
    showAddLocation () {
      // console.log(this.addressLists.length)
      this.addLocationFlag = true
    }
  },
  components: {
    AddLocation
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.locationbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 560px;
  background-color: white;
  color: black;
  /* text-align: center; */
  z-index: 2;
  border-radius: 4px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.8);
  border: none;
}
.location_top {
  position: relative;
  margin: 0;
  padding: 0 45px 0 18px;
  height: 38px;
  line-height: 38px;
  z-index: 1;
  border-bottom: 1px solid #191919;
  border-radius: 4px 4px 0 0;
  background: #2d2d2d;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
}
.location_cancel {
  position: absolute;
  z-index: 20;
  top: 16px;
  right: 20px;
  width: 10px;
  height: 10px;
  color: white;
  overflow: hidden;
  text-indent: -9999px;
  cursor: pointer;
  background: url(https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/9660125932/c989/d009/7328/c3811556cb5c698eee7b2b7394413b1f.png)
    no-repeat;
  background-position: 0 -95px;
  text-align: left;
  font-size: inherit;
}
.location_body {
  position: relative;
  margin: 15px auto;
  width: 780px;
  height: 500px;
}

.location_body .location_table {
  width: 780px;
  height: 450px;
  margin: 15px auto;
  text-align: center;
  /* background-color: pink; */
}

.location_table table {
  width: 780px;
  font-size: 16px;
  border-collapse: collapse;
}

.location_table th,
.location_table td {
  border: 1px solid #999;
  text-align: center;
  padding: 10px 0;
}

.location_table table thead tr {
  /* background-color: #008c8c; */
  background-color: #e8e8e8;
  /* color: #fff; */
}

/* .location_table table tbody tr:nth-child(odd){
    background-color: #eee;
} */

.location_table table tbody tr:hover {
  background-color: #ccc;
}

.location_table table tr td a:hover {
  color: #5cbeff;
  text-decoration: underline;
  cursor: pointer;
}

.add_address_btn button {
  position: absolute;
  bottom: 6px;
  right: 20px;
  width: 84px;
  height: 42px;
  font-size: 12px;
  font-weight: 700;
  color: black;
  cursor: pointer;
  text-align: center;
  line-height: 42px;
  border: none;
  background-size: 300% 100%;
  background-color: #a8a8a8;
  box-shadow: 0 4px 15px 0 #e8e8e8;
  border-radius: 50px;
  transition: all 0.4s ease-in-out;
}
.add_address_btn button:hover {
  background-color: #bfb6b6;
}
</style>
